<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
 <h:head>
	<title>User DOB Registration</title>
	<link rel="stylesheet" type="text/css" href="CSS/tcal.css" />
	<script type="text/javascript" src="JavaScript/tcal.js"></script>
	<script type="text/javascript" src="JavaScript/Validator.js"></script>
	<script type="text/javascript">	
		function reg_user()
		{
			document.getElementById("regform").reset();
			document.getElementById("regform:userid").focus();
		}
	</script>
</h:head>
    <h:body onload="reg_user();">
 
    	<h1>User DOB Registration</h1>
 
		<h:form id="regform" onsubmit="return validate();">
		<h:panelGrid columns="2">
			<h:outputText value="UserId:"/>
			<h:inputText id="userid" value="#{user.userId}" style="border: 1px solid silver" maxlength="6"/>
			
			<h:outputText value="Name:"/>
			<h:inputText id="name" value="#{user.name}" style="border: 1px solid silver"/>

			<h:outputText value="EmailId:"/>
			<h:inputText id="email" value="#{user.email}" style="border: 1px solid silver"/>
			
			<h:outputText value="DOB Month:"/>
			<h:selectOneMenu id="dobMonth" value="#{user.dobMonth}"
                required="true" requiredMessage="Select Month">
                <p:ajax listener="#{user.handleMonthChange()}"	event="change" update="dobDate" process="@this" />
                <f:selectItems value="#{user.months}"/>
            </h:selectOneMenu>
			
			<h:outputText value="DOB Date:"/>
			<h:selectOneMenu id="dobDate" value="#{user.dobDate}"
                required="true" requiredMessage="Select Date">
                <f:selectItems value="#{user.dates}"/>
            </h:selectOneMenu>
			
			<h:commandButton type="submit" value="Submit" action="#{user.handleUser}"/>
			<h:commandButton type="reset" value="Reset"/>
 		</h:panelGrid>
 		</h:form>
 		<a href="data.xhtml">View All Data</a>
    </h:body>
 
</html>